<template>
  <header>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal">
      <div class="container">
        <el-menu-item index="1">
          <i class="fas fa-home"></i> 主页</el-menu-item>
        <el-menu-item index="2">
          <i class="fas fa-compass"></i> 发现</el-menu-item>
        <el-menu-item index="3">
          <i class="fas fa-bullhorn"></i> 通知</el-menu-item>
        <el-menu-item index="4">
          <i class="far fa-envelope"></i> 私信</el-menu-item>
        <el-form class="form" :inline="true">
          <el-input size="mini" suffix-icon="el-input__icon el-icon-search" placeholder="大家正在搜：红芯浏览器回应谷歌内核"></el-input>
        </el-form>
        <div class="user">
          <template v-if="!this.$store.state.username">
            <router-link to="/member">
              <el-menu-item index="5">登录</el-menu-item>
            </router-link>
            <router-link to="/member">
              <el-menu-item index="6">注册</el-menu-item>
            </router-link>
          </template>
          <template v-else>
            <el-menu-item index="7">{{this.$store.state.username}}</el-menu-item>
            <el-menu-item index="8" @click="logOut()">退出</el-menu-item>
          </template>
        </div>

      </div>
    </el-menu>
  </header>

</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      userInfo: null
    };
  },
  mounted() {
    this.get_userInfo();
  },
  methods: {
    get_userInfo() {
      if (this.$AV.User.current()) {
        let username = this.$AV.User.current()._serverData.username;
        this.$store.commit("get_username", username);
      }
    },
    logOut() {
      this.$AV.User.logOut();
      // 登出后跳转到登录页面
      this.$message("已经登出，跳转到登录页面");
      let username = this.$AV.User.current();
      this.$store.commit("get_username", username);
      this.$router.push("/member");
    }
  }
};
</script>

<style scoped>
header {
  margin-bottom: 10px;
}

header li {
  display: inline-block;
  font-weight: 600;
}

.form {
  display: inline-block;
  width: 30%;
}

.user {
  float: right;
  display: inline-block;
}

.user .el-menu-item {
  padding-left: 10px;
  padding-right: 10px;
}

.user a {
  margin-left: 15px;
  color: #303133;
  font-size: 14px;
}
</style>


